import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './Protocol.scss';

const classNames = require('classnames');

class Protocol extends Component {
  constructor (props) {
    super(props);
    this.state = {
      visible: false,
      radioChecked: false,
    };
  }

  componentWillReceiveProps (nextProps) {
    this.setState({
      visible: nextProps.visible,
      radioChecked: nextProps.radioChecked,
    });
    this.handleAgree = this.handleAgree.bind(this);
    this.handleRefuse = this.handleRefuse.bind(this);
  }
  handleRefuse () {
    this.props.toogleProtocol(false);
  }
  handleAgree () {
    this.props.toogleProtocol(true);
  }
  render () {
    const className = classNames('protocol-view', { hide: !this.state.visible });
    const { radioChecked } = this.state;

    return (
      <div className={className}>
        <div className="protocol-head">
          <button onClick={this.handleRefuse} >
            <img src="https://files.pansheng.com/web/arrow_left@2x.png" alt="" />
          </button>
          <span>保密协议</span>
        </div>
        <div className="protocol-content">
          <p className="title">
            <span>北京磐晟投资管理有限公司 与</span>
            <span>之保密协议</span>
          </p>
          <div className="main">
            <p className="main-text">本协议由以下当事方于_______年____月____日签署：
              <br />
              <span>1.</span>
              <span>北京磐晟投资管理有限公司（“公司”），一家根据中国法律成立的有限责任公司，注册地址：
                北京市朝阳区建国门外大街甲6号1幢11层C座十二层1206室；
              </span>
              <br />
              <span>2.</span>
              <span>__________________________________，一家根据__________________________法律成立的有限责任公司，
              </span>
              <br />注册地址：_______________________
              <br />
              <br />鉴于：
              <br />
              <span>（1）公司及其关联方或子公司，以及公司担任普通合伙人的有限合伙企业等，（
                以下合称“接收方”）拟与合作方（包括其关联方或子公司，下称“披露方”）（与接收方单独称“一方”，合称“双方”）
                就________进行合作 (下称：“项目”)。在此过程中，披露方会向接收方提供“保密信息”（定义见下文），供其开展与项目相关的业务使用；
              </span>
              <br />
              <span>（2）披露方拥有与协议目的有关并对披露方具有商业价值的某些保密信息，且披露方一直采取一
                切必要的措施，以保护该等信息并防止任何人对该等信息做出任何未经授权的披露；
              </span>
              <br />
              <br />为此，双方达成如下协议：
              <br />
              <span>1.</span>
              <span>本协议中所述之“保密信息”系指本协议双方在项目合作过程中，以及项目开展前，
                因任何原因（包括但不限于接收方在披露方任职的），由披露方或其董事、管理人员、
                合伙人、员工、代理人、顾问、融资方、律师、财务顾问或会计审计人员（下称“代表”）通过书面、
                口头或任何其它形式向接收方或其代表提供或披露的与项目及双方拟就项目进行合作有关的不为
                公众所知晓的信息、数据及资料，包括但不限于双方拟进行合作的条件及双方就项目进行合作谈判之事实。
                披露此类保密信息的方式，包括但不限于信函、传真、备忘、纪要、协议、报告、方案、电子邮件等。
              </span>
              <br />
              <span>2.</span>
              <span>接收方承诺对披露方披露的保密信息保密，并采取必要的防范措施以防止任何保密信息
                未经披露方许可而被披露给其他不相关的第三方。如接收方知晓任何保密信息未经披
                露方许可被披露给其他不相关的第三方，应立即通知披露方，并协助披露方采取一切救济措施。
              </span>
              <br />
              <span>3.</span>
              <span>接收方同意并确认，其只将披露方提供的保密信息用于与项目合作有关之目的。</span>
              <br />
              <span>4.</span>
              <span>双方同意，接收方仅为项目合作有关之目的，
                可将其从披露方获得的保密信息提供或披露给其内部参与项目合作的董事、
                合伙人、管理人员及雇员或其为进行项目合作而聘请的专业顾问或对项目有投资
                意向的投资人，但在披露时应向此类人员说明保密信息的保密性质，要求其对保密信息
                予以保密。如果披露方要求，接收方应告知披露方该等代表的身份及名字。接收方应
                对此类人员违反本协议下的保密义务承担责任。
              </span>
              <br />
              <span>5.</span>
              <span>本协议中的保密信息不包括：</span>
              <br />
              <span>（1）在披露方披露前接收方已经合法掌握的任何信息和资料；</span>
              <br />
              <span>（2）接收方从第三方获取的任何信息和资料，并且据接收方所知，该第三方并无法律和/或合同上的义务对其提供的信息和资料保密；</span>
              <br />
              <span>（3）经披露方事先书面同意而披露或使用的信息或资料；</span>
              <br />
              <span>（4）并非因接收方的过错而进入公众领域的任何信息或资料；</span>
              <br />
              <span>（5）由接收方在没有参考提供方提供的信息或资料的情况下独立开发的信息。</span>
              <br />
              <span>6.</span>
              <span>经披露方要求，接收方应及时将披露方所提供的有关保密信息的原件及复印件归
                还给披露方，或采取适当措施销毁以任何形式存在于接收方的保密信息；双方进一
                步同意，即使接收方已按照上述约定归还或销毁保密信息，接收方及其代表仍继续
                受本协议的约束直至本协议约定的接收方保密义务期限终止。
              </span>
              <br />
              <span>7.</span>
              <span>接收方承认所有保密信息均为披露方的财产。将保密信息披露给接收方并不意味着对该等保密信息的权利的转移。</span>
              <br />
              <span>8.</span>
              <span>如接收方根据相关法律或行政程序的要求，必须披露保密信息，不应被视为违约，
                但应只限于法律或行政程序要求披露的部分，并应在可能的情况下及时通知披露方。
              </span>
              <br />
              <span>9.</span>
              <span>接收方违反本协议的约定并给披露方造成损害的，接收方应向披露方赔偿披露
                方遭受的实际损失（包括但不限于披露方因采取救济手段发生的合理费用）。如果以资
                金补偿不足够补救由于违反本协议给披露方造成的损害，接收方同意披露方将有权采取
                法律所允许的其他补救措施。
              </span>
              <br />
              <span>10.</span>
              <span>本协议的签订并不使任何一方有义务就项目的合作作出任何确定的承诺。</span>
              <br />
              <span>11.</span>
              <span>如发生与本协议相关之争议，双方应首先努力通过友好协商解决。如果在
                协商开始后30日内争议仍不能解决，任何一方可将争议提交中国国际经济贸易仲
                裁委员会，按照申请仲裁时该会现行有效的仲裁规则进行仲裁，仲裁地点在北京。
                仲裁裁决是终局的，对双方均有约束力。本协议适用中国法律。
              </span>
              <br />
              <span>12.</span>
              <span>本协议自协议双方签署之日起生效。接收方在本协议项下的保密义务自本协议生效之日起至保密信息成为公开信息之日起止。</span>
              <br />
              <span>13.</span>
              <span>未经双方签署书面修改协议，本协议不得被修改、补充或作其他修订。</span>
              <br />
              <span>14.</span>
              <span>如果任何有权机构认定本协议下的任何条款不具执行力，该条款将被视作从本协议分割，并不能影响本协议下其它条款的执行力。</span>
              <br />
              <br />
            </p>
            <div className="sign-wrapper">
              <p className="title">北京磐晟投资管理有限公司</p>
              <p className="sign">
                <span className="label">法定代表人或授权代表（签名）：</span>
                <span className="line" />
              </p>
              <p className="sign">
                <span className="label">公司名称：</span>
                <span className="line" />
              </p>
              <p className="sign">
                <span className="label">法定代表人或授权代表（签名）：</span>
                <span className="line" />
              </p>
            </div>
            <div className="switch">
              <span className="active">CN</span>
              <span>EN</span>
            </div>
          </div>
        </div>
        <div className="btn-wrapper">
          {!radioChecked && <div className="btn btn-refuse" role="button" tabIndex={0} onClick={this.handleRefuse}>拒绝</div>}
          <div className="btn btn-agree" role="button" tabIndex={0} onClick={this.handleAgree}>同意</div>
        </div>
      </div>
    );
  }
}

Protocol.propTypes = {
  visible: PropTypes.bool.isRequired,
  radioChecked: PropTypes.bool.isRequired,
  toogleProtocol: PropTypes.func.isRequired,
};

export default Protocol;
